/**
* @Author: 李晨光
* @Date: 2019/12/5
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/5
**/
<comment>
  # 组件注释
  搜索公用
</comment>
<template>
  <div id="Search">
    <slot name="search-btn">
      <mu-list>
        <mu-list-item
          @click="openSearch"
          style="text-align: center;align-items: center;display: flex;justify-content: center"
        >
          <div class="search"  @click="openSearch">
            <mu-icon value="search" />
            {{placeholder}}
          </div>
        </mu-list-item>
      </mu-list>
    </slot>
    <mu-dialog
      width="360"
      transition="slide-bottom"
      fullscreen
      class="searchContainer"
      :open.sync="open"
    >
      <mu-appbar color="primary" class="lan-header search-header">
        <slot name="dialog-header">
          <mu-button icon slot="left" @click="closeSearch">
            <i class="iconfont angle-left iconangle-left"></i>
            <span class="lan-header-back">返回</span>
          </mu-button>
          <mu-text-field
            ref="searchInput"
            class="search-input"
            v-model="keyword"
            @input="search"
            :placeholder="placeholder"
          ></mu-text-field>
          <i class="iconfont iconqingchu cancel" v-if="keyword" @click="clear"></i>
        </slot>
      </mu-appbar>
      <div style="margin-top: 10px;height:calc(100vh - .5rem);overflow: auto">
        <slot name="search-item" :data="lists">
          <mu-list>
            <mu-list-item
              class="mu-item-search"
              v-for="(list, index) in lists"
              button
              style="margin-bottom: 1px;"
              :key="index"
              @click="select(list)"
            >
              <mu-list-item-content>
                <!--checkbox  radio-->
                <template v-if="list.hasChecked && false">
                  <mu-checkbox
                    v-if="multiple"
                    v-model="list.checked"
                    :value="list.value"
                    :label="list.label"
                  ></mu-checkbox>
                  <mu-radio v-else v-model="check" :value="list.value" :label="list.label"></mu-radio>
                </template>
                <div>
                  <mu-list-item-title v-if="!list.hasChecked || true">{{list.label}}</mu-list-item-title>
                  <mu-list-item-sub-title>{{list.orgName}}</mu-list-item-sub-title>
                </div>
              </mu-list-item-content>
              <mu-list-item-action class="list-icon">
                <!--<span>开发开</span>-->
                <div style="width: .2rem;margin-left: .1rem;">
                  <i
                    v-show="check == list.value"
                    class="iconfont iconxuanze"
                    style="color: #24D90C;"
                  ></i>
                </div>
              </mu-list-item-action>
            </mu-list-item>
          </mu-list>
        </slot>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
export default {
  name: "Search",
  components: {},
  props: {
    placeholder: {
      type: String,
      default: "输入名称搜索"
    },
    // 打开状态
    open: {
      type: Boolean,
      default: false
    },
    // 原数据 数组
    lists: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      // 搜索关键字
      keyword: null,
      // 选择项
      check: "",
      // 选择结果
      checked: []
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    'open': {
      handler(val) {
        if(val){
          this.$nextTick(() => {
            this.$refs.searchInput.focus()
            this.keyword = null
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    // 选择选项
    select(item) {
      this.check = item.value;
      // this.closeFullscreenDialog();
      this.$emit("confirm", [item]);
    },
    // 打开
    openSearch() {
      this.$emit("open", true);
    },
    // 关闭
    closeSearch() {
      this.$emit("close", true);
    },
    // 搜索
    search: debounce(function(val) {
      this.$emit("search", this.keyword);
    }, 1000),
    // 清空
    clear() {
      this.keyword = null;
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
.search-header {
  .mu-appbar-title {
    width: 100% !important;
    flex: 1 !important;
    padding: 0;
    padding-right: 14px;
  }
}

.search-input {
  margin-bottom: 0 !important;
  width: 100%;
  .mu-input-line,
  .mu-input-focus-line {
    display: none;
  }
  input {
    height: 0.33rem;
    background: rgba(248, 248, 248, 1);
    border-radius: 0.83rem;
    border: 0.01rem solid rgba(224, 224, 224, 1);
    padding: 0 0.15rem;
    font-size: 0.13rem;
    font-weight: 400;
    color: rgba(61, 61, 61, 1);
  }
}
.mu-item-search .mu-item {
  height: 0.75rem;
}
.searchContainer {
  .mu-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 2.5rem;
  }
}

.cancel {
  position: absolute;
  right: 30px;
  color: #cbcbcb;
}

.list-icon.mu-item-action.is-more {
  width: auto !important;
  max-width: 1.4rem !important;
  &:after {
    display: none !important;
  }
}
</style>
